<template>
  <!-- 折叠展开高度设置 -->
  <div class="navHeader" v-if="!this.$store.state.Collapse.isCollapse">
      <div class="control-btn">
          <i class="el-icon-d-arrow-right" @click="setIsCollapse"></i>
      </div>
      <el-aside :width="this.$store.state.Collapse.isCollapse ? '0' : '144px'">
          <el-menu :collapse-transition="false" :collapse="this.$store.state.Collapse.isCollapse" router
              :default-active="$route.path" class="el-menu-vertical-demo">
              <el-menu-item index="/home/notification">
                  <span>入库通知</span>
              </el-menu-item>
              <el-menu-item index="/home/orders">
                  <span>入库订单</span>
              </el-menu-item>
              <el-menu-item index="/home/receipt">
                  <span>收货管理</span>
              </el-menu-item>
              <el-menu-item index="/home/check">
                  <span>货物验收</span>
              </el-menu-item>
              <el-menu-item index="/home/quality">
                  <span>质检管理</span>
              </el-menu-item>
              <el-menu-item index="/home/warehousing">
                  <span>货物入仓</span>
              </el-menu-item>
              <el-menu-item index="/home/news">
                  <span>新建货品</span>
              </el-menu-item>
              <el-submenu index="/home">
                  <template slot="title">
                      <span>货品属性</span>
                  </template>
                  <el-menu-item-group>
                      <el-menu-item index="/home/classify">
                          <span>分类</span>
                      </el-menu-item>
                      <el-menu-item index="/home/brand">
                          <span>品牌</span>
                      </el-menu-item>
                      <el-menu-item index="/home/unit">
                          <span>单位</span>
                      </el-menu-item>
                  </el-menu-item-group>
              </el-submenu>
          </el-menu>
      </el-aside>
  </div>
</template>
<script>
export default {
  methods: {
      setIsCollapse() {
          this.$store.commit(
              "changeIsCollapse",
              !this.$store.state.Collapse.isCollapse
          );
      }
  }
};
</script>
<style lang="scss" scoped>
.navBtn {
  display: flex;
}

.el-menu {
  background-color: #f3f3f3;
  border-right: 0;
  text-align: left;
  color: #fff;
  height: 100%;
}

.control-btn-small {
  width: 50px !important;
}

.navHeader {
  width: 145px;
}

.el-container {
  // 5.布局容器 高度100%
  height: 100%;

  .el-aside {
      // 6.侧边栏 高度100%
      // height: 100%;
      // background-color: #f3f3f3;

      // .el-menu {
      //     background-color: #f3f3f3;
      //     border-right: 0;
      //     text-align: left;
      //     color: #fff;
      // }
      overflow: hidden !important;
      height: 90vh;
  }

  ::v-deep .el-main {
      padding: 0;

      .el-tag {
          border: none !important;
          background-color: #fafafa;
          height: 32px;
          line-height: 32px;
      }
  }
}

// 一级菜单样式
.el-menu .el-menu-item,
.el-menu .el-submenu__title {
  height: 50px;
  line-height: 50px;
  
  i {
      color: #000;
  }
}

// 鼠标移开
.el-menu-item.is-active{
  // color: #000;
  background-color: #c5ccd7;
  color: #6D829F;
}

// 二级菜单
.el-menu .el-menu-item-group {
  background-color: #ebecee;
}

// 菜单点亮交互样式
.el-menu .el-menu-item.is-actives,
.el-menu .el-submenu__title.span-active {
  background-color: #c5ccd7;
  color: #fff;
}

::v-deep .el-menu-item-group__title{
  padding: 0;
}
.el-menu .el-menu-item  span{
  color:0;
}

.el-menu .el-menu-item:hover,
.el-menu .el-menu-item:focus,
::v-deep .el-menu .el-submenu__title:hover {
  background-color: #c5ccd7;
  color:#6D829F;
}

::v-deep .el-menu .el-submenu__title i {
  color: #000;
}
// 箭头
::v-deep .el-icon-d-arrow-right{
  padding: 10px;
}
.control-btn {
  display: inline-block;
  text-align: right;
  color: #fff;
  background-color: #233040;
  width: 145px;
  height: 32px
}

</style>